<template>
  <Modal
    :closable="false"
    :footer="null"
    v-model:visible="show"
    :title="$t('message.login')"
  >
    <Form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <FormItem name="username">
         <Row>
          <Col :span="8"  :style="{textAlign: 'right',verticalAlign: 'middle'}">  
            <span>{{$t('message.loginName')}}：</span>
          </Col>
          <Col :span="12" :style="{verticalAlign: 'middle'}">        
            <Input v-model:value="formState.username" />
          </Col>
        </Row>
      </FormItem>
      <FormItem name="password">
        <Row style="margin-top: 10px">
          <Col :span="8" :style="{textAlign: 'right',verticalAlign: 'middle'}">  
            <span>{{$t('message.password')}}：</span>
          </Col>
          <Col :span="12">        
            <!-- <Input.InputPassword v-model:value="formState.password" /> -->
            <Input type="password" v-model:value="formState.password" />
          </Col>
        </Row>
      </FormItem>
      <FormItem name="code">
        <Row style="margin-top: 10px">
          <Col :span="8" style="text-align: right">  
            <span>{{$t('message.verificationCode')}}：</span>
          </Col>
          <Col :span="6">        
            <Input v-model:value="formState.code" />
          </Col>
          <Col :span="6">        
            <img :src="codeUrl" @click="getCode" style="height: 30px"/>
          </Col>
        </Row>
      </FormItem>
       <FormItem name="rememberMe">
        <Row style="margin-top: 10px">
          <Col :span="8" style="text-align: right">  
            {{$t('message.remember')}}：
          </Col>
          <Col :span="12">        
            <Checkbox v-model="formState.rememberMe"></Checkbox>
          </Col>
        </Row>
      </FormItem>
      <div :style="{textAlign: 'center',marginTop: '20px'}">
        <Button type="primary" @click="submit">{{$t('message.submit')}}</Button>
        <Button style="margin-left: 10px" @click="close">{{$t('message.cancel')}}</Button>
      </div>
    </Form>
  </Modal>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, onMounted} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { useStore } from '@/store'
import { message } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'
export default defineComponent({
  name: "audio-input",
  emits: ["submit", "close"],
  props: ["show"],
  setup(props, app) {
    const store = useStore()
    const state = store.state
    const route = useRoute()
	  const router = useRouter()  
    const{ emit } = app
    const codeUrl = ref("")
    const formRef = ref()
    const spinning = ref(false)
    const captchaOnOff = ref(true)
    const { t } = useI18n()
    const formState = reactive({
      username: undefined,
      password: undefined,
      rememberMe: false,
      code: undefined,
      uuid: undefined
    })

    const rules = {
      username: [
          { required: true, trigger: "blur", message: "username" }
        ],
        password: [
          { required: true, trigger: "blur", message: "password" }
        ],
        code: [{ required: true, trigger: "change", message: "code" }]
    }

    const resetForm = () => {
      formRef.value.resetFields()
    }

    const getCode = () => {
      getCodeImg().then((res: any) => {
        captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (captchaOnOff.value) {
          codeUrl.value = "data:image/gif;base64," + res.img;
          formState.uuid = res.uuid;
        }
      });
    }
    const getCookie = () => {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      formState.username = formState.username || username
      // formState.password =  formState.password || decrypt(password)
      formState.rememberMe = formState.rememberMe || Boolean(rememberMe)
    }

    const close = () => emit('close')
    const submit = () => {
      formRef.value
        .validate()
        .then(() => {
          spinning.value = true 
          if (formState.rememberMe) {
            Cookies.set("username", formState.username, { expires: 30 });
            // const {password} = formState
            // Cookies.set("password", encrypt(formState.password), { expires: 30 });
            Cookies.set('rememberMe', formState.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          store.dispatch("Login", formState).then(() => {
            message.success("success！")
            close()
            // router.push({ path:  "/" }).catch(()=>{});
          }).catch(() => {
            spinning.value = false 
            if (captchaOnOff.value) {
              getCode()
            }
          });

        })
        .catch((error: any) => {
          spinning.value = false 
        });

    }
    onMounted(() => {
      if(props.show){
        getCode()
        getCookie()
      }
    })
    return {
      formRef,
      formState,
      rules,
      codeUrl,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      captchaOnOff,
      spinning,
      resetForm,
      submit,
      close,
      getCookie,
      getCode,
      $t:t,
    }
  },
});
</script>

